<template>
  <div>
    <div>
      <p>
        线下未结案工单
      </p>
    </div>

    <div v-if="workOrder">
      <el-card>
        <el-image
          style="width: 100px; height: 100px"
          :src="workOrder.imageUrl"
          :preview-src-list="[workOrder.imageUrl]"
        ></el-image>
        <div>
          <strong>工单号:</strong> {{ workOrder.orderNo }} <br />
          <strong>工单类型:</strong> {{ workOrder.workOrderType }} <br />
          <strong>工单状态:</strong> {{ workOrder.workOrderStatus }} <br />
          <strong>创建时间:</strong> {{ new Date(workOrder.workOrderCreateTime).toLocaleString() }} <br />
          <strong>问题描述:</strong> {{ workOrder.workOrderDescription }} <br />
        </div>
      </el-card>
      <el-button v-if="!isTrackingWorkOrder" @click="handleClose(workOrder)">线下结案</el-button>
    </div>

    <div v-else>
      <p>当前没有下线待结案工单</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyOrder",
  data() {
    return {
      workOrder: null,
      isTrackingWorkOrder: false,
    };
  },
  methods: {
    BookRemoval() {
      this.$http.post('/tWorkOrder/UserOrderInProgress')
        .then(response => {
          if (response.data.code === 200) {
            this.workOrder = response.data.data;
            this.isTrackingWorkOrder = this.workOrder.workOrderType === '随行工单';
          } else {
            console.error('获取工单信息失败:', response.data.message);
          }
        })
        .catch(error => {
          console.error('获取数据失败:', error);
        });
    },
    handleClose(order) {
      if (this.isTrackingWorkOrder) {
        this.$message.warning('随行工单不能线下结案');
        return;
      }

      console.log('结案工单:', order);
      const formData = new FormData();
      formData.append('orderNo', this.workOrder.orderNo);
      this.$http.post('/tWorkOrder/CloseOrder', formData)
        .then(response => {
          this.$message.success('工单已成功结案');
          this.BookRemoval();
        })
        .catch(error => {
          console.error('结案失败:', error);
          this.$message.error('结案失败，请重试！');
        });
    }
  },
  created() {
    this.BookRemoval();
  }
}
</script>

<style scoped>
/* 可以添加一些样式来美化你的组件 */
</style>
